<template>
  <div>
    <div class="form-wrap">
      <div class="input-field">
        <span class="label">手机号</span>
        <input
          v-model="form.phone"
          class="input-block"
          type="text"
          placeholder="填写手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
      </div>
      <div class="input-field" style="position:relative">
        <span class="label">验证码</span>
        <input
          v-model="form.authCode"
          class="input-block"
          type="number"
          placeholder="填写验证码"
          placeholder-class="placeholder-part"
          maxlength="6"
        />
        <ButtonNormalStoreMsg :phone="form.phone" type="PHONE_CHECK" />
      </div>
      <div class="input-field">
        <span class="label">设置密码</span>
        <input
          v-model="form.newPassword"
          class="input-block"
          type="text"
          password
          placeholder="6-20位登录密码"
          placeholder-class="placeholder-part"
        />
      </div>
      <div class="input-field">
        <span class="label">确认密码</span>
        <input
          v-model="form.repeatPassword"
          class="input-block"
          type="text"
          password
          placeholder="6-20位登录密码"
          placeholder-class="placeholder-part"
        />
      </div>

      <button class="btn-color-blue" @click="handleNext">确认找回</button>

      <a href="/pages/open-shop/store-login/main" class="forget">返回？去登录</a>
    </div>
  </div>
</template>

<script>
import ButtonNormalStoreMsg from '@/components/ButtonNormalStoreMsg'
import { encryptMD5 } from '@/utils'
import { PUT_RESET_MEMBER_PAS } from '@/api'

export default {
  components: { ButtonNormalStoreMsg },
  props: {},
  data () {
    return {
      form: {
        phone: '',
        newPassword: '',
        repeatPassword: '',
        authCode: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    handleNext () {
      this.registerStoreCustomer()
    },

    registerStoreCustomer () {
      const vm = this
      for (const key in vm.form) {
        if (!vm.form[key]) {
          vm.$toast('请先完成表单')
          return false
        }
      }

      if (!/^1[3456789]\d{9}$/.test(vm.form.phone)) {
        vm.$toast('手机号码格式错误')
        return false
      }

      if (vm.form.newPassword !== vm.form.repeatPassword) {
        vm.$toast('两次输入的密码不一致')
        return false
      }

      if (
        this.form.newPassword.length < 6 ||
        this.form.newPassword.length > 20
      ) {
        this.$toast('密码为6~20位')
        return false
      }

      let params = {
        ...vm.form,
        providerId: vm.$store.state.account.providerId
      }
      params.newPassword = encryptMD5(vm.form.newPassword)
      params.repeatPassword = encryptMD5(vm.form.repeatPassword)

      PUT_RESET_MEMBER_PAS(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('找回密码成功,即将返回登录', '').then(() => {
              vm.$router.replace('/pages/open-shop/store-login/main')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .input-field {
    > .label {
      width: 100px;
    }
  }
  > .btn-color-blue {
    margin-top: 30px;
  }
  > .forget {
    color: $blue;
    font-size: 14px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
